<template>
    <div class="comp">
      <!-- 放图表 -->
      <div class="echarts" ref="vertical">子组件</div>
    </div>
  </template>
  
  <script>
  export default {
    data() {
      return {
        echartsInstance: null,
        allData: [], //业务数据
      };
    },
    mounted() {
      this.initEcharts();
      this.getData();
      //监听窗口变化实现图表自适应
      window.addEventListener('resize',this.adapTive)
      //调用适配方法
      this.adapTive()
    },
    methods: {
      //1. echarts实例初始化
      initEcharts() {
        this.echartsInstance = this.$echarts.init(this.$refs.vertical, "dark");
        //设置绘图需要的静态配置项
        let initOptions = {
          // 标题
          title: {
            text: "▍全国地区种植收成情况",
            top: "2%",
            left: "2%",
          },
          // 提示
          tooltip: {
            show: true,
            trigger: "axis",
            axisPoint: {
              type: "shadow",
            },
          },
          // 坐标系
          grid: {
            show: false,
            top: "10%",
            left: "3%",
            right: "3%",
            bottom: "5%",
            containLabel: true,
          },
          // x轴
          xAxis: {
            type: "category",
           
          },
          // y轴
          yAxis: {
            type: "value",
          },
          // 图表类型
          series: [
            {
              type: "bar",
              label: {
                show: true,
                rotate:40
              },
              itemStyle: {
                color: {
                  type: "linear",
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  colorStops: [
                    {
                      offset: 0,
                      color: "orange", // 0% 处的颜色
                    },
                    {
                      offset: 1,
                      color: "orangered", // 100% 处的颜色
                    },
                  ],
                },
              },
            },
          ],
        };
        // 绘制基础图表
        this.echartsInstance.setOption(initOptions);
      },
      // 获取业务数据
      async getData() {
        let { data } = await this.$http.get("plantingHarvest");
        console.log(data);
        this.allData = data;
        //根据业务继续完善图表
        this.setEcharts();
      },
      // 根据业务完善图表
      setEcharts() {
        // 1.组装类目数据和系列数据
        let cateData = this.allData.map((item) => item.month);
        let serData = this.allData.map((item) => item.harvest);
  
        //  设置图标绘制项
        let setOptions = {
          xAxis: {
            data: cateData,
          },
          // 图表类型
          series: [
            {
              data: serData,
            },
          ],
        };
        // setOption 合并多次的绘图配置项 完善图表
        this.echartsInstance.setOption(setOptions);
      },
      // 窗口适配方法
      adapTive() {
        let width = this.$refs.vertical.offsetWidth;
  
        let scale = (width / 100) * 3.6;
  
        let adapOptions = {
          title: {
            textStyle: {
              fontSize: scale,
            },
          },
          // 柱子宽度
          series: [
            {
              barWidth: scale,
              itemStyle: {
                borderRadius: [scale / 2, scale / 2, 0,0],
              },
            },
          ],
        };
        // 适配绘图
        this.echartsInstance.setOption(adapOptions);
        // 图标适配
        this.echartsInstance.resize();
      },
    },
  };
  </script>
  
  <style>
  </style>